<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tien | Web</title>
    <link rel="stylesheet" href="../css/flexBlog/flexBlog.css" />
    <link rel="stylesheet" href="../css/flexBlog/iconfont.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
</head>

<body>
    <!-- header -->
    <nav class=" header navbar navbar-default navbar-fixed-top">
        <div class="container col-xs-12 col-sm-12 col-md-12 col-lg-8 col-lg-offset-2  clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block">
            <div class="navbar-header col-xs-4">
                <a class="logo navbar-brand" href="#">
                    <!-- <img alt="Brand" src="..."> -->
                    <span class="glyphicon glyphicon-tower" aria-hidden="true"><i>CodeTower</i></span>
                </a>
            </div>
            <div id="serach" class="serach input-group ">
                <input type="text" class=" form-control" aria-label="..." placeholder="Search...">
                <div class="input-group-btn">
                    <button type="button" class="btn_show serach-btn btn btn-default btn-lg">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- jumbotron - banner-->
    <div class="jumbotron banner">
        <h1>Hello,欢迎来到Tien的项目展示页</h1>
        <p>Bootstrap 弹性布局</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Github</a></p>
    </div>

    <!-- content -->
    <div class="content row">
        <div class="container-fluid col-lg-10 col-lg-offset-1 col-xs-12">
            <!-- Item List -->
            <div class="content_itemList row">
                <div class="com_width content_title container col-lg-12 ">
                    <h1>Item List&nbsp;-</h1>
                </div>
                <div class="com_width content_1 col-lg-4">
                    <div class="thumbnail">
                        <img src="../img/project-img/flexBlog/img1.jpg" alt="">
                        <div class="caption">
                            <h3>Animations</h3>
                            <p>用 Html/Css/Javascript 简单制作的动画</p>
                            <p><a class="btn btn-primary" role="button" href="#">More&nbsp;&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="com_width content_1 col-lg-4">
                    <div class="thumbnail">
                        <img src="../img/project-img/flexBlog/img4.jpg" alt="">
                        <div class="caption">
                            <h3>Layout</h3>
                            <p>常见布局（圣杯、飞翼、瀑布流等）</p>
                            <p><a class="btn btn-primary" role="button" href="#">More&nbsp;&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
                <div class="com_width content_1 col-lg-4">
                    <div class="thumbnail">
                        <img src="../img/project-img/flexBlog/img3.jpg" alt="">
                        <div class="caption">
                            <h3>Projects</h3>
                            <p>部分项目展示</p>
                            <p><a class="btn btn-primary" role="button" href="#">More&nbsp;&gt;&gt;</a></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notes List -->
            <div class="content_notesList row">
                <div class="com_width notes_title container col-lg-12 ">
                    <h1>Notes List&nbsp;-</h1>
                </div>
                <div class="comWidth container col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                    <div class="row">
                        <div class="notes_content col-lg-2 col-md-2 col-sm-2 ">
                            <div class="notes_img">
                                <img src="../img/project-img/flexBlog/img33.jpg" class="img-responsive" alt="Responsive image">
                            </div>
                        </div>

                        <div class="notes_txt col-lg-10 col-md-10 col-sm-10">
                            <h3>Title1</h3>
                            <h3></h3>
                            <p>aaaaaaaa</p>
                            <p>bbbbbbbbbbbbbbbbbbbbb</p>
                            <p class="notes_date">Date:Y/M/D</p>
                        </div>
                        <div class="col-lg-12">
                            <hr />
                        </div>
                    </div>
                    <div class="row">
                        <div class="notes_content col-lg-2 col-md-2 col-sm-2 ">
                            <div class="notes_img">
                                <img src="../img/project-img/flexBlog/img33.jpg" class="img-responsive" alt="Responsive image">
                            </div>
                        </div>

                        <div class="notes_txt col-lg-10 col-md-10 col-sm-10">
                            <h3>Title1</h3>
                            <h3></h3>
                            <p>cccccccccccc</p>
                            <p>dddddddddddddddddddddddddddd</p>
                            <p class="notes_date">Date:Y/M/D</p>
                        </div>
                        <div class="col-lg-12">
                            <hr />
                        </div>
                    </div>
                    <div class="row">
                        <div class="notes_content col-lg-2 col-md-2 col-sm-2 ">
                            <div class="notes_img">
                                <img src="../img/project-img/flexBlog/img33.jpg" class="img-responsive" alt="Responsive image">
                            </div>
                        </div>

                        <div class="notes_txt col-lg-10 col-md-10 col-sm-10">
                            <h3>Title1</h3>
                            <h3></h3>
                            <p>eeeeeeeeee</p>
                            <p>ffffffffffffffffffffffffffffffffffff</p>
                            <p class="notes_date">Date:Y/M/D</p>
                        </div>
                        <div class="col-lg-12">
                            <hr />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- skill -->
    <div class="skill row">
        <div class="container-fluid col-lg-10 col-lg-offset-1 col-xs-12">
            <div class="skill_list row">
                <div class="com_width skill-title container col-lg-12 ">
                    <h1>Skill List&nbsp;-</h1>
                </div>
                <div class="skill_content col-lg-12">
                    <div class="panel panel-default">
                        <!--  panel contents -->
                        <div class="panel-heading tableItem_title">
                            【*】学习中；&nbsp;【**】基本功能；&nbsp;【***】简单应用；&nbsp;【****】熟练使用
                        </div>
                        <!-- Table -->
                        <table class="table table-hover">
                            <tr class="tableItem_title">
                                <td>#前端基础</td>
                                <td>Html/Css/Js</td>
                                <td>jQuery</td>
                                <td>Less/Sass</td>
                            </tr>
                            <tr>
                                <td>熟练程度</td>
                                <td>****</td>
                                <td>****</td>
                                <td>***</td>
                            </tr>
                            <tr class="tableItem_title">
                                <td>#前端框架</td>
                                <td>Bootstrap</td>
                                <td>VUE/React</td>
                                <td>Angular</td>
                            </tr>
                            <tr>
                                <td>熟练程度</td>
                                <td>+++</td>
                                <td>+++</td>
                                <td>+</td>
                            </tr>
                            <tr class="tableItem_title">
                                <td>#测试工具</td>
                                <td>Wireshark</td>
                                <td>TestCenter</td>
                                <td>Charles</td>
                            </tr>
                            <tr>
                                <td>熟练程度</td>
                                <td>$$$$</td>
                                <td>$$$$</td>
                                <td>$$$$</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="col-lg-12 center-block" id="footer">
        <a class="btn btn-default foot-btn" role="button" href="#"><span class="iconfont icon-Github "></a>
        <a class="btn btn-default foot-btn" role="button" href="#"><span class="iconfont icon-sina "></a>
        <a class="btn btn-default foot-btn" role="button" href="#"><span class="iconfont icon-ziyuan "></a>
        <a class="btn btn-default foot-btn" role="button" href="#"><span class="iconfont icon-jianshu "></a>
        <hr>
        <span id="footer-txt">&copy;&nbsp;Copyright&nbsp;2019&nbsp;Tien&nbsp;-&nbsp;All&nbsp;Rights&nbsp;Reserved</span>
    </div>


    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="../js/project-js/flexBlog.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>